<template>
    <div
        class="article-item flex py-2 hover:text-blue-500 cursor-pointer"
        :class="{ 'mb-2': props.min, 'mb-4': !props.min }"
    >
        <div
            v-if="props.item.poster"
            :class="{
                'mr-2 w-[90px] max-h-[60px]': props.min,
                'mr-4 w-[100px] max-h-[80px]': !props.min,
            }"
            class="border flex-shrink-0"
        >
            <el-image
                class="h-full w-full rounded overflow-hidden"
                :src="props.item.poster"
            />
        </div>
        <div class="flex flex-col justify-between">
            <div class="mb-2  text-slate-900" :class="{ 'text-xl': !props.min }">
                {{ props.item.title }}
            </div>
            <div class="flex" :class="{ 'text-sm': props.min }">
                <div class="text-gray-400 mr-4" v-if="props.item.user">
                    {{ props.item.user.nickname }}
                </div>
                <div
                    class="text-gray-400 mr-4"
                    v-if="props.item.publishTime && !props.min"
                >
                    {{
                        dayjs(props.item.publishTime).format(
                            'YYYY-MM-DD HH:mm:ss'
                        )
                    }}
                </div>
                <div class="text-gray-400">{{ props.item.viewCount }} 浏览</div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs'

const props = defineProps<{
    item: any
    min?: boolean
}>()
</script>

<style scoped></style>
